<script type="text/javascript" src="__ADDONROOT__/js/myQuery.js"></script>

<style type="text/css">
    .btn-close{
        position: absolute;
        top: -8px;
        right: -8px;
        width: 17px;
        height: 17px;
        background: url('__ADDONROOT__/images/bg_icon.png') no-repeat -25px 0;
        cursor: pointer;
    }

    .btn-close:hover {
        text-decoration: none;
        border-bottom: 0 none;
    }

    .upload-img-box .upload-pre-item{
        position: relative;
        margin-bottom: 8px;
        overflow: visible;
    }

    /* 上传图片点击弹出层 */
    .upload-img-popup {
        position: fixed;
        z-index: 9999;
        padding: 3px;
        border: 1px solid #c3c3c3;
        background-color: #fff;
        box-shadow: 0 0 4px rgba(0,0,0,.5);
    }

    .upload-img-popup img{
        display: inline-block;
        max-height: 500px;
        max-width: 500px;
        cursor: pointer;
    }

    .upload-img-popup .close-pop {
        position: absolute;
        top: -8px;
        right: -8px;
        width: 17px;
        height: 17px;
        background: url('__ADDONROOT__/images/bg_icon.png') no-repeat -25px 0;
    }
    .upload-img-popup .close-pop:hover {
        text-decoration: none;
        border-bottom: 0 none;
    }
    .upload-img-popup img {
        display: block;
    }
    .upload_icon_all {
        width: 15px;
        height: 15px;
        background: url('__ADDONROOT__/images/attachment_1.png');
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px
    }
    #multi-upload-img-box-{$fieldName} .upload-pre-item{
        margin-right: 10px;
        float: left;
    }

</style>

<div class="controls">
    <input type="file" id="multi_upload_picture_{$fieldName}">
    <div id="multi-upload-img-box-{$fieldName}" class="upload-img-box">
        <notempty name="images">
            <volist name="images" id="picture">
                <div class="upload-pre-item">
                    <img src="__ROOT__{$picture['path']}" data-id="{$picture['id']}"/>
                    <span class='btn-close' title='删除图片' data-id="{$picture['id']}" onclick="dele(this)"></span>
                </div>
            </volist>
        </notempty>
    </div>
    <input type='hidden' name='{$fieldName}' class='icon' data-field="{$fieldName}" value='{$images_ids}'/>
</div>

<script type="text/javascript">
    //上传图片
    /* 初始化上传插件 */
    $("#multi_upload_picture_{$fieldName}").uploadify({
        "height"          : 30,
        "swf"             : "__STATIC__/uploadify/uploadify.swf",
        "fileObjName"     : "download",
        "buttonText"      : "上传图片",
        "uploader"        : "{:U('File/uploadPicture',array('session_id'=>session_id()))}",
        "width"           : 120,
        'removeTimeout'   : 1,
        'fileTypeExts'    : '*.jpg; *.png; *.gif;',
        "onUploadSuccess" : uploadPicture_{$fieldName},
        'onFallback' : function() {
            alert('未检测到兼容版本的Flash.');
        }
    });


    function uploadPicture_{$fieldName}(file, data){
        var data = $.parseJSON(data);
        var src = '';
        if(data.status){
            console.log('图片上传插件启动');
            console.log('上传图片状态'+data.status);
            console.log('图片id= '+data.id);

            //创建<div class="upload-pre-item"> 图片子容器
            $_upload_item = $("<div class='upload-pre-item'></div>");


            src = data.url || '__ROOT__' + data.path;
            //创建 图片元素
            $_upload_img = $("<img src=" + src +" title='点击显示大图' data-id="+data.id+"> ");
            //创建 删除按钮
            $_img_del = $("<span class='btn-close' title='删除图片' data-id="+data.id+" onclick='dele(this)'></span>");

//            $_img_path.val(data.id);

            //加入到upload-img-box

            $_upload_item.append($_upload_img);//图片容器 里 添加图片
            $_upload_item.append($_img_del);   //图片容器 里 添加删除按钮
//            $_upload_item.append($_img_path);

            var ids = new Array();
            var arr_temp = $("input[name='{$fieldName}']").val().split(",");
            console.log('当前图片个数 '+arr_temp.length);
            for(var i=0 ; i<arr_temp.length; i++){
                console.log(arr_temp[i]+'|'+data.id);
                if(arr_temp[i]>0){
                    ids.push(arr_temp[i]);
                    console.log(ids);

                }
            }

            console.log('检查是否已存在 key='+ids.indexOf(data.id));
            if(ids.indexOf(data.id)<0){
                ids.push(data.id);
                $("input[name='{$fieldName}']").val(ids.join(","));//页面中添加 图片id 表单
                $(".icon").parent().find('#multi-upload-img-box-{$fieldName}').append($_upload_item);//图片父容器 中 添加 图片子容器

            }else{
                console.log('图片已存在');
                confirm('图片已存在');
            }


        } else {
            updateAlert(data.info);
            setTimeout(function(){
                $('#top-alert').find('button').click();
                $(that).removeClass('disabled').prop('disabled',false);
            },1500);
        }
    }


    /*删除上传的图片（前台删除）*/
    function dele(obj){

        //删除 ids字符串中 按钮所对应图片的data-id
        var id = $(obj).data("id");//要删除的图片ID
        console.log("删除图片ID="+id);
        var f = $(obj).parent().parent().parent(".controls").children("input");

        var ids = f.val().split(",");//图片ID数组

        var new_ids = new Array();
        console.log('删除前图片id ids='+ids);
        console.log('删除前图片个数 length= '+ids.length);
        for(var i=0; i < ids.length; i++){
            if(ids[i]!=id && ids[i]!=','){
                console.log(ids[i]);
                new_ids.push(ids[i]);
            }
        }
        f.val(new_ids.join(","));//页面中添加 图片id 表单
        console.log(f.val());//执行删除之后，表单值
        $(obj).parents(".upload-pre-item").remove();

    }
</script>